﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat</title>
</head>
<body>
    <canvas id="mycanvas" width="1000" height="700" style="position: fixed; left: 0px; top: 0px;"/>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvas = document.getElementById("mycanvas"); //绘图区域
        let context = canvas.getContext("2d"); //绘图上下文
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        let gPaint = new FCPaint(); //绘图对象
        gPaint.canvas = canvas;
        scaleCanvas(gPaint);
        //判断是否移动端
        gPaint.isMobile = isMobileMode();
        if (gPaint.isMobile) {
            gPaint.scaleFactorX = 2.5;
            gPaint.scaleFactorY = 2.5;
        }
        //判断主题色
        gPaint.defaultUIStyle = "light";
        addDefaultEvent(canvas, gPaint);

        /*
        * 树节点的点击事件
        * tree:树
        * node:节点
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        gPaint.onClickTreeNode = function(tree, node, firstTouch, firstPoint, secondTouch, secondPoint, clicks){
            console.log(node.value);
        };

        /*
         * 重置大小
         */
        let resizeAll = function () {
            try {
                canvas.width = document.documentElement.clientWidth;
                canvas.height = document.documentElement.clientHeight;
                scaleCanvas(gPaint);
                updateViewDefault(gPaint.views);
            } catch (err) {
                //alert(err);
            }
            invalidate(gPaint);
        };

        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();
        };

        //解析加载XML
        let xml = `<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="facecat">
  <head></head>
  <body>
    <div dock="fill" type="tab" selectedindex="0">
      <div name="TabPage" text="可视化生成" type="tabpage">
        <tree name="Tree" text="Tree" location="45,56" size="200,200" headervisible="False">
        </tree>
        <tree name="Tree2" text="Tree2" location="256,56" size="200,200">
          <tr>
            <th text="FCGridColumn" name="FCGridColumn" width="300"/>
            <th text="FCGridColumn2" name="FCGridColumn2"/>
            <th text="FCGridColumn3" name="FCGridColumn3"/>
          </tr>
          <nodes>
            <node text="Node1">
            <node text="Node2">
            <node text="Node3"/>
            </node>
            </node>
          </nodes>
        </tree>
      </div>
      <div name="TabPage2" text="代码创建" type="tabpage"/>
    </div>
  </body>
</html>
        `;
        renderFaceCat(gPaint, xml);
        let tree = findViewByName("Tree", gPaint.views);
        tree.showCheckBox = true;

        let rootNode = new FCTreeNode();
        rootNode.value = "证监会行业类";
        appendTreeNode(tree, rootNode, null);

        let node1 = new FCTreeNode();
        node1.value = "农、林、牧、渔业";
        appendTreeNode(tree, node1, rootNode);

        let strs1 = new Array();
        strs1.push("农业");
        strs1.push("林业");
        strs1.push("畜牧业");
        strs1.push("渔业");
        strs1.push("农、林、牧、渔服务业");
        for (let i = 0; i < strs1.length; i++) {
            let subNode1 = new FCTreeNode();
            subNode1.value = strs1[i];
            appendTreeNode(tree, subNode1, node1);
        }

        let node2 = new FCTreeNode();
        node2.value = "采矿业";
        appendTreeNode(tree, node2, rootNode);

        let strs2 = new Array();
        strs2.push("煤炭开采和洗选业");
        strs2.push("石油和天然气开采业");
        strs2.push("黑色金属矿采选业");
        strs2.push("有色金属矿采选业");
        strs2.push("非金属矿采选业");
        strs2.push("开采辅助活动");
        for (let i = 0; i < strs2.length; i++) {
            let subNode2 = new FCTreeNode();
            subNode2.value = strs2[i];
            appendTreeNode(tree, subNode2, node2);
        }

        let node3 = new FCTreeNode();
        node3.value = "制造业";
        appendTreeNode(tree, node3, rootNode);

        let strs3 = new Array();
        strs3.push("农副食品加工业");
        strs3.push("食品制造业");
        strs3.push("酒、饮料和精制茶制造业");
        strs3.push("纺织业");
        strs3.push("纺织服装、服饰业");
        strs3.push("皮革、毛皮、羽毛及其制品和制鞋业");
        strs3.push("木材加工和木、竹、藤、棕、草制品业");
        strs3.push("家具制造业");
        strs3.push("造纸和纸制品业");
        strs3.push("印刷和记录媒介复制业");
        strs3.push("文教、工美、体育和娱乐用品制造业");
        strs3.push("石油加工、炼焦和核燃料加工业");
        strs3.push("化学原料及化学制品制造业");
        strs3.push("医药制造业");
        strs3.push("化学纤维制造业");
        strs3.push("橡胶和塑料制品业");
        strs3.push("非金属矿物制品业");
        strs3.push("黑色金属冶炼和压延加工业");
        strs3.push("有色金属冶炼和压延加工业");
        strs3.push("金属制品业");
        strs3.push("通用设备制造业");
        strs3.push("专用设备制造业");
        strs3.push("汽车制造业");
        strs3.push("铁路、船舶、航空航天和其他运输设备制造业");
        strs3.push("电气机械和器材制造业");
        strs3.push("计算机、通信和其他电子设备制造业");
        strs3.push("仪器仪表制造业");
        strs3.push("其他制造业");
        strs3.push("废弃资源综合利用业");
        for (let i = 0; i < strs3.length; i++) {
            let subNode3 = new FCTreeNode();
            subNode3.value = strs3[i];
            appendTreeNode(tree, subNode3, node3);
        }
        invalidate(gPaint);
    </script>
</body>
</html>
